<template>
  <div>
    <el-dialog class="form-dialog" width="800px" :title="title" :visible.sync="visible">
      <el-form ref="form" :rules="rules" label-width="100px" :model="form">
        <el-form-item label="版本号" prop="versionNum">
          <el-input v-model="form.versionNum" placeholder="版本号建议不重复，递增" />
        </el-form-item>

        <el-form-item label="模板类型" prop="optionValue">
          <el-cascader
            v-model="form.optionValue"
            style="width: 632px"
            :options="options"
            @change="handleChange"
          />
        </el-form-item>

        <el-form-item label="代码模板" prop="templateId">
          <div v-if="form.templateId">【模板ID】{{ form.templateId }}</div>
          <div v-if="form.templateId">【开发版本号】{{ form.templateUserVersion }}</div>
          <div v-if="form.templateId">【开发备注】{{ form.templateUserDesc }}</div>
          <el-button class="selectTempeBtn" type="primary" size="small" :disabled="mode !== 'add'" @click="handleSelectTemplate">选择模板
          </el-button>
        </el-form-item>

        <el-form-item label="更新说明" prop="updateMsg">
          <el-input v-model="form.updateMsg" type="textarea" />
        </el-form-item>

        <!--<el-form-item label="ext json">-->
        <!--<el-input type="textarea" v-model="form.extJson"></el-input>-->
        <!--</el-form-item>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="close">取 消</el-button>
        <el-button class="trueBtn" type="primary" :loading="loading" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
    <template-list-dialog ref="templateListDialog" />
  </div>

</template>

<script>
import TemplateListDialog from '../components/TemplateListDialog'
import { getVersion, addVersion, updateVersion } from '@/api/wxapp'
import { getClassifyTplOptions } from '@/api/wxappClassify'

export default {
  name: 'FormDialog',
  components: { TemplateListDialog },
  data() {
    return {
      loading: false,
      visible: false,
      title: '',
      mode: '',
      options: [],
      optionValue: [],
      reject: null,
      resolve: null,
      permId: null,
      form: {
        name: null,
        description: null,
        remark: null,
        groupId: null,
        ranking: null
      },
      rules: {
        versionNum: [{
          required: true,
          message: '请输入版本号',
          trigger: 'blur'
        }],
        optionValue: [{
          required: true,
          message: '请选择模板类型',
          trigger: 'blur'
        }],
        templateId: [{
          required: true,
          message: '请选择模板id',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    defaultForm() {
      return {
        name: '',
        classifyDesc: '',
        classifyCode: '',
        templateCode: '',
        templateId: '',
        optionValue: [],
        templateUserVersion: '',
        extJson: ''
      }
    },

    handleChange() {

    },
    add() {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.mode = 'add'
        this.title = '添加版本'
        this.form = this.defaultForm()
        getClassifyTplOptions().then(res => {
          if (res.code === 0) {
            this.options = res.data
          }
        })
      })
    },
    edit(versionId) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.mode = 'edit'
        this.title = '编辑版本'
        getClassifyTplOptions().then(res => {
          if (res.code === 0) {
            this.options = res.data
          }
        })

        getVersion(versionId).then(res => {
          this.form = res.data
          this.form.optionValue = [this.form.classifyCode, this.form.classifyCode + '@' + this.form.templateCode]
        })
      })
    },

    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
      this.$refs.form.resetFields()
    },
    handleSelectTemplate() {
      this.$refs.templateListDialog.show().then(template => {
        this.form.templateId = template.templateId
        this.form.templateUserVersion = template.userVersion
        this.form.templateUserDesc = template.userDesc
      })
    },

    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = this.form
          data.classifyCode = this.form.optionValue[0]
          data.templateCode = this.form.optionValue[1].replace(data.classifyCode + '@', '')
          if (this.mode === 'add') {
            this.loading = true
            addVersion(data).then((resp) => {
              this.loading = false
              if (resp.code === 0) {
                this.$notify({ title: '成功', message: '添加成功', type: 'success', duration: 2000 })
                this.resolve && this.resolve()
                this.close()
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.loading = true
            updateVersion(data).then((resp) => {
              this.loading = false
              if (resp.code === 0) {
                this.$notify({ title: '成功', message: '修改成功', type: 'success', duration: 2000 })
                this.resolve && this.resolve()
                this.close()
              }
            }).catch(() => {
              this.loading = false
            })
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped="">
	::v-deep .el-input__inner:focus{
		border-color: $btnBgc;
	}
	::v-deep .el-textarea__inner:focus{
		border-color: $btnBgc;
	}
	::v-deep .el-cascader .el-input.is-focus .el-input__inner{
		border-color: $btnBgc;
	}
	::v-deep .el-button--primary.is-disabled, .el-button--primary.is-disabled:hover, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:active{
		background-color: $btnBgc;
		opacity: 0.5;
		border-color: $btnBgc;
	}
	::v-deep .el-dialog__headerbtn .el-dialog__close:hover{
		color: $btnBgc;
	}
	.cancelBtn:hover{
		border-color: $btnBgc;
		background-color: $btnBgc;
		color: white;
	}
	.trueBtn, .selectTempeBtn{
		border-color: $btnBgc;
		background-color: $btnBgc;
		color: white;
	}
	.trueBtn:hover, .selectTempeBtn:hover{
		opacity: 0.5;
	}
</style>

